<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style type="text/css">
	header{
			position: relative;
			width: 100%;
			height: 50px;
			background-color: #669999;
		}
		header .left{
			font-size: 16px;
			position: absolute;
			top: 13px;
			bottom: 0;
			left: 8px;
			width: 100px;
			height: 50px;
		}
		header .left img{
			width: 24px;
		}
		header .center{
			font-size: 18px;
			position: absolute;
			top: 16px;
			left: 0;
			right: 0;
			color: #fff;
			letter-spacing: 8px;
		}
		#loginDiv{
			width: 100%;
			margin-top: 80px;
		}
		#loginDiv .loginIn{
			margin: 0 auto;
			width: 80%;
			position: relative;
			border: 1px solid #669999;
			height: 50px;
			margin-top: 30px;
			border-radius: 20px;
		}
		#loginDiv .loginBtn{
			margin: 0 auto;
			width: 80%;
			background: #669999;
			color: #fff;
			position: relative;
			border: 1px solid #669999;
			height: 50px;
			margin-top: 40px;
			border-radius: 20px;
		}
		#loginDiv .loginIn input{
			position: absolute;
			top: 16px;
			left: 20px;
			outline: none;
			border: none;
			font-size: 16px;
			width: 90%;
		}
		#loginDiv .loginBtn span{
			position: absolute;
			font-size: 20px;
			letter-spacing: 20px;
			line-height: 50px;
		}
</style>
<body>
	<header>
   		<div class="left" id="leftBtn" onclick="api.closeWin();">
			<img src="../image/back.png">
   		</div>
   		<div class="center">登录</div>
   		<div class="right"></div>
   	</header>

   	<div id="loginDiv">
   		<div class="loginIn">
   			<input type="text" name="username" placeholder="用户名" id="username">
   		</div>
   		<div class="loginIn">
   			<input type="password" name="password" placeholder="用户密码" id="password">
   		</div>
   		<div class="loginBtn">
   			<span>登录</span>
   		</div>
   	</div>
</body>

<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
    	var w = $(window).width();
  		var h = $(window).height();
  		$(".center").css("left",(w-36)/2 + "px");

  		var dW = $("#loginDiv .loginBtn").width();
  		$("#loginDiv .loginBtn span").css("left",(dW-50)/2 + "px");
   	};

   	$(".loginBtn").click(function(){
   		var username = $("#username").val();
   		var password = $("#password").val();
   		if(username == "201558234080" && password == "lucas"){
   			api.openWin({
	         	name: 'person',
	            url: '../html/person.html',
	            bounces: true,
	  		});
   		}
   		else{
   			alert("请检查输入的用户名或密码是否有误");
   		}
   	});
</script>
</html>